<template>
  <div>
    <h1>{{ workflow_one.name }}</h1>
    <form @submit.prevent="handleSubmit">
      <div v-for="item in formFields" :key="item.name">
        <label :for="item.name">{{ item.name }}</label>
        <!-- 处理字符串类型 -->
        <el-input
          v-if="item.type === 'string'"
          :id="item.name"
          v-model="formData[item.name]"
          style="width: 200px;"
        />
        <!-- 处理数字类型 -->
        <el-input
          v-if="item.type === 'number'"
          :type="item.type"
          :id="item.name"
          v-model="formData[item.name]"
          style="width: 200px;"
        />
        <!-- 处理文本域类型 -->
        <textarea
          v-if="item.type === 'text'"
          :id="item.name"
          v-model="formData[item.name]"
          style="width:300px; 
                resize: none; /* 禁止用户调整大小 */
                padding: 10px;
                border: 1px solid #ddd; /* 边框样式 */
                border-radius: 4px; /* 圆角样式 */
                font-family: 'Arial', sans-serif; /* 字体 */
                font-size: 16px; /* 字体大小 */
                line-height: 1.5; /* 行高 */"
        ></textarea>
      </div>
      <div>
    <h3>审批顺序</h3>
    <ul>
      <li v-for="(item, index) in workflow_reviewer_list" :key="index">
        {{ item.name }}
      </li>
    </ul>
  </div>
      <el-button type="primary" @click= "tosubmit">提交申请</el-button>
    </form>
    
  </div>


</template>
    
<script setup>
import http from "../../http";  
import { ref, onMounted } from 'vue';
import { useRouter,useRoute } from 'vue-router'; 
import { ElMessage } from "element-plus";
const router = useRouter();
const route = useRoute()
let userid=ref()
let xid = route.query.id
let workflow_one=ref([])
const formFields = ref([]);
const formData = ref({});
const getWorkflowData = () => {
  http.get(`/app/workflow/${xid}`)
    .then(res => {
      console.log(res)
      workflow_one.value = res.data;
    //   通过parseParams解析获取到的数据中的params
      parseParams(workflow_one.value.params);
    })
    .catch(error => {
      console.error('获取工作流数据失败:', error);
    });
};
// parseParams方法传入的参数是workflow_one.value.params，
const parseParams = (params) => {
    // JSON解析
  const parsedParams = JSON.parse(params);
//   赋值formFields
  formFields.value = parsedParams;
  console.log(formFields.value)
};
// 提交数据
const tosubmit=()=>{
  const task_data=JSON.stringify(formData.value)
  console.log(task_data)
  console.log(workflow_one.value)
  console.log(userid.value);
  console.log(next_audit_id.value);
  http.post(`/app/task/add_task/`,{name:workflow_one.value.name,params:task_data, workflow_id:workflow_one.value.id,staffid:userid.value,next_audit:next_audit_id.value,level:1})
      ElMessage.success("提交成功")
      router.push("/firsthome")
}

let next_audit_id=ref()
// 获取工作审查人员数据列表
const workflow_reviewer_list = ref([])
const get_workflow_list = () => {
  http.post(`app/node/get_workflow_list/`,{id:xid})
      .then(res=>{
        workflow_reviewer_list.value=res.data.data
        console.log(res.data)
        next_audit_id.value = res.data.next_audit
      })
}
onMounted(
    ()=>{
      userid.value = localStorage.getItem("userid")
      getWorkflowData(),
      get_workflow_list()
    }
)
</script>
<style scoped>
form {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background: #fff; /* 白色背景 */
  border-radius: 8px; /* 圆角边框圆角 */
  box-shadow: 0 2px 4px 6px rgba(0, 0, 0, 0.1); /* 阴影 */
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500; /* 加粗体 */
}


</style>
    